<template>
  <div class="navMenu">
    <template v-for="navMenu in navMenus">
      <!-- 最后一级菜单 -->
      <el-menu-item v-if="!navMenu.childs && navMenu.entity"
                    :key="navMenu.entity.id"
                    :data="navMenu"
                    :index="navMenu.entity.path"
                    @click="divClick(navMenu.entity.alias)">
        <i :class="navMenu.entity.icon"></i>
        <span slot="title">{{ navMenu.entity.alias }}</span>
      </el-menu-item>

      <!-- 此菜单下还有子菜单 -->
      <el-submenu v-if="navMenu.childs && navMenu.entity"
                  :key="navMenu.entity.id"
                  :data="navMenu"
                  :index="navMenu.entity.path"
                  @click="divClick(navMenu.entity.alias)">
        <template slot="title">
          <i :class="navMenu.entity.icon"></i>
          <span> {{ navMenu.entity.alias }}</span>
        </template>
        <!-- 递归 -->
        <NavMenu :navMenus="navMenu.childs"></NavMenu>
      </el-submenu>
    </template>
  </div>
</template>

<script>
import EventBus from '../../../bus/bus'

export default {
  name: 'NavMenu',
  props: ['navMenus'],
  data () {
    return {}
  },
  methods: {
    divClick: function (location) {
      EventBus.$emit('change-location', location)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.navMenu >>>.el-menu-item {
  font-size: $fontSize;
  min-width: $navWidth;
  background: $bgColor;
  color: $fontColor;
}

.navMenu >>>.el-submenu__title {
  font-size: $fontSize;
  background: $bgColor;
  color: $fontColor;
}

.navMenu {
  width: $navWidth;
}
</style>
